<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 需求：有多个不确定完成时间的异步任务，如何让它们按照指定顺序执行？1 2 3
// setTimeout(()=>{// 异步任务
//     console.log( 1 );
// },1234);
// setTimeout(()=>{// 异步任务
//     console.log( 2 );
// },834);
// setTimeout(()=>{// 异步任务
//     console.log( 3 );
// },2234);

// 传统解决方案：
// setTimeout(()=>{// 异步任务
//     console.log( 1 );
//     setTimeout(()=>{// 异步任务
//         console.log( 2 );
//         setTimeout(()=>{// 异步任务
//             console.log( 3 );
//         },2234);
//     },834);
// },1234);

// 多层回调函数嵌套 即 回调地狱 --> 新的解决方案 Promise


// 这样使用的问题：
// 1.类似的代码重复书写
// 2.异步任务什么时候执行不可控
// let p1 = new Promise((resolve,reject)=>{
//     setTimeout(()=>{// 异步任务
//         console.log( 1 );
//         resolve();
//     },1234);
// });
// let p2 = new Promise((resolve,reject)=>{
//     setTimeout(()=>{// 异步任务
//         console.log( 2 );
//         resolve();
//     },834);
// });
// let p3 = new Promise((resolve,reject)=>{
//     setTimeout(()=>{// 异步任务
//         console.log( 3 );
//         resolve();
//     },2134);
// });

// dosomething执行后返回一个Promise对象
function dosomething(tesk,time){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{// 异步任务
            console.log( tesk );
            resolve();
        },time);
    });
}

dosomething('任务1',1234)// p1
.then(()=>{
    // 说明第一个异步任务执行完成了
    return dosomething('任务2',823);// p2
})// p3
.then(()=>{
    // 说明第二个异步任务执行完成了
    return dosomething('任务3',2123);// p4
})// p5
.then(()=>{
    // 说明第三个异步任务执行完成了
    console.log( '执行其他任务 4' );
})
.catch((err)=>{
    console.log( '失败或出错了',err );
});

</script>
</body>
</html>